<template>
    <div class="table_con"
        v-loading="loading">
        <tableComponents :isShow="false"
            :isHaveExport="false"
            :isHavePagination="false"
            @toAdd="update_sort"
            addText="更新"
            addIcon="el-icon-s-claim">
            <template v-slot:table>
                <el-table :data="sort_data"
                    style="width: 100%;margin-bottom: 20px;"
                    border
                    row-key="id">
                    <el-table-column label="分类名称"
                        min-width="200">
                        <template slot-scope="scope">
                            <div class="tree_yiji">
                                {{ scope.row.f_title }}
                                <div class="three_title">
                                    {{ scope.row.three }}级栏目(下属分类{{ scope.row.length }}个)
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="图标"
                        min-width="70">
                        <template slot-scope="scope">
                            <div class="img_bor">
                                <img :src="$fnc.getImgUrl(scope.row.piclink)"
                                    alt />
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="排序"
                        sortable
                        :sort-method="sorta"
                        align="center"
                        width="80">
                        <template slot-scope="scope">
                            <div v-if="scope.row.id != 1">
                                <el-input @change="sortNew(scope.$index, scope.row)"
                                    v-model.number="scope.row.sort"
                                    autocomplete="off"
                                    size="small"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间"
                        min-width="100"
                        align="center">
                        <template slot-scope="scope">{{
              scope.row.created_time | getTimeFormat
            }}</template>
                    </el-table-column>
                    <el-table-column label="同步时间"
                        min-width="100"
                        align="center">
                        <template slot-scope="scope">{{
              scope.row.update_time | getTimeFormat
            }}</template>
                    </el-table-column>
                    <el-table-column label="操作"
                        min-width="100"
                        align="center">
                        <template slot-scope="scope">
                            <el-button :loading="$store.state.isLoading"
                                type="primary"
                                size="mini"
                                @click="update_shop(scope.row.f_id, 1)">同步</el-button>
                            <el-button :loading="$store.state.isLoading"
                                type="success"
                                size="mini"
                                @click="remove_sort(scope.row.f_id)">清空</el-button>
                            <el-button :loading="$store.state.isLoading"
                                v-if="scope.row.f_id != 1"
                                type="danger"
                                size="mini"
                                @click="delete_sort(scope.row.id)">删除</el-button>
                            <el-button :loading="$store.state.isLoading"
                                type="primary"
                                size="mini"
                                @click="edit_info(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col v-show="mask_flag">
                        <div class="mask">
                            <div class="syn_msg">
                                <h1>同步中..</h1>
                                <h3>正在同步{{ syn_item }}第{{ syn_page }}页</h3>
                                <el-button :loading="$store.state.isLoading"
                                    type="primary"
                                    size="mini"
                                    @click="syn_stop">停止</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </template>
        </tableComponents>

        <el-dialog title="编辑"
            :append-to-body="true"
            @close="show_tb = false"
            :visible.sync="show_tb"
            width="800px"
            class="tl size_13">
            <el-form :model="tbObj" label-width="120px">
                <el-form-item label="标题"
                    prop="title">
                    <el-col :span="12">
                        <el-input v-model="tbObj.f_title"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="图标"
                    prop="piclink">
                    <el-col :span="12"
                        class="tl">
                        <el-input v-model="tbObj.piclink"
                            autocomplete="off"
                            clearable disabled
                            class="mar_bottom_5"></el-input>
                        <uploadpic :piclink="tbObj.piclink"
                            :width="80"
                            :height="80"
                            :real_width="80"
                            :real_height="80"
                            :is_more="false"
                            @send_pic="onSuccess"></uploadpic>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="$store.state.isLoading"
                        type="primary"
                        @click="editTb"
                        size="mini">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<style scoped>
.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.syn_msg {
    width: 500px;
    height: 150px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 11;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
}
</style>
<script>
import tableTree from "../currency/tableThree";
import menuForm from "@/components/currency/menuMessageBox.vue";
import HeadTitle from "@/components/currency/HeadTitle.vue";
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
    data () {
        return {
            sort_data: [],
            text_data: [],
            loading: false,
            propertyShow: "暂无",
            syn_page: 1,
            mask_flag: false,
            syn_item: "",
            tbObj: {
                piclink: "",
                f_title: ""
            },
            show_tb: false
        };
    },
    watch: {},
    computed: {},
    created () {
        this.get_text();
    },
    methods: {
        onSuccess (pic) {
            this.tbObj.piclink = pic;
        },
        edit_info (val) {
            this.tbObj = val;
            this.show_tb = true;
        },
        editTb () {
            var data = {
                id: this.tbObj.id,
                piclink: this.tbObj.piclink,
                f_title: this.tbObj.f_title
            };
            this.$api.getShops.tb_cate_savepiclink(data).then(res => {
                if (res.data.code == 200) {
                    this.$swal("修改成功！", "", "success");
                    this.show_tb = false;
                    this.get_text();
                } else {
                    this.$swal("修改失败！", res.data.result, "error");
                }
            });
        },

        sorta (a, b) {
            return b - a;
        },
        sortNew (index, row) {
            var params = {};
            params.id = row.id;
            params.sort = row.sort;
            this.$api.getShops.sorttb(params).then(res => {
                if (res.data.code == 200) {
                    this.get_text();
                    console.log(res);
                }
            });
        },
        sortrow (row) {
            console.log(row);
        },
        get_text () {
            //获取选品库类别列表
            this.$api.getShops.get_tb_cate({}).then(res => {
                if (res.data.code == 200) {
                    this.sort_data = res.data.result.data;
                }
            });
        },
        syn_stop () {
            this.syn_page = 1;
            this.mask_flag = false;
        },
        syn_hjqd (i) {
            if (this.syn_page < 100) {
                if (this.mask_flag == true) {
                    this.$api.getShops.renew_hjqd({ page: i }).then(res => {
                        if (res.data.code == 200) {
                            this.syn_page = i;
                            if (res.data.result == true) {
                                var temp = i + 1;
                                return this.syn_hjqd(temp);
                            } else {
                                this.$swal("好卷清单同步完成", "", "success");
                                this.syn_page = 1;
                                this.mask_flag = false;
                                return;
                            }
                        } else {
                            this.$swal("好卷清单同步结束", "", "warning");
                            this.syn_page = 1;
                            this.mask_flag = false;
                        }
                    });
                } else {
                    this.$swal("好卷清单同步结束", "", "warning");
                    this.syn_page = 1;
                    this.mask_flag = false;
                }
            } else {
                this.$swal("好卷清单同步结束", "", "warning");
                this.syn_page = 1;
                this.mask_flag = false;
            }
        },
        syn_xpk (f_id, i) {
            if (this.syn_page < 100) {
                if (this.mask_flag == true) {
                    this.$api.getShops.renew_xpk({ f_id: f_id, page: i }).then(res => {
                        if (res.data.code == 200) {
                            this.syn_page = i;
                            if (res.data.result == true) {
                                var temp = i + 1;
                                return this.syn_xpk(f_id, temp);
                            } else {
                                this.$swal("选品库同步完成", "", "success");
                                this.syn_page = 1;
                                this.mask_flag = false;
                                return;
                            }
                        } else {
                            this.$swal("选品库同步结束", "", "warning");
                            this.syn_page = 1;
                            this.mask_flag = false;
                        }
                    });
                } else {
                    this.$swal("选品库同步结束", "", "warning");
                    this.syn_page = 1;
                    this.mask_flag = false;
                }
            } else {
                this.$swal("选品库同步结束", "", "warning");
                this.syn_page = 1;
                this.mask_flag = false;
            }
        },
        update_shop (f_id, page) {
            this.mask_flag = true;
            this.syn_page = 1;
            if (f_id == 1) {
                //同步 好券清单
                this.syn_item = "好券清单";
                this.syn_hjqd(1);
            } else {
                //同步 选品库商品
                this.syn_item = "选品库商品";
                this.syn_xpk(f_id, 1);
            }
        },
        remove_sort (f_id) {
            // 清空分类商品
            this.$swal({
                title: "您确定要清空分类商品吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除",
                cancelButtonText: "容我三思"
            }).then(willDelete => {
                if (willDelete.value) {
                    this.$api.getShops.del_fid({ f_id: f_id }).then(res => {
                        if (res.data.code == 200) {
                            // console.log("清空分类商品")
                            this.$swal("删除成功！", "您已经清空了商品分类。", "success");
                            // this.$store.dispatch('getShopsAll',this.searchAll);
                            this.get_text();
                        } else {
                            this.$swal("删除失败！", "出错啦！", "success");
                        }
                    });
                }
            });
        },
        delete_sort (id) {
            //删除选品库分类
            this.$swal({
                title: "您确定要删除选品库分类吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除",
                cancelButtonText: "容我三思"
            }).then(willDelete => {
                if (willDelete.value) {
                    this.$api.getShops.del_sort({ id: id }).then(res => {
                        console.log(res);
                        if (res.data.code == 200) {
                            // console.log("删除选品库分类")
                            this.$swal("删除成功！", "您已经删除选品库分类。", "success");
                            // this.$store.dispatch('getShopsAll',this.searchAll);
                            this.get_text();
                        } else if (res.data.code == 400) {
                            this.$swal("请先清空商品", "出错啦！", "danger");
                        } else {
                            this.$swal("删除失败！", "出错啦！", "success");
                        }
                    });
                }
            });
        },
        update_sort () {
            //更新类别 选品库类别  youshang
            this.$api.getShops.renew_xpk_cate({}).then(res => {
                if (res.data.code == 200) {
                    this.get_text();
                    // console.log("更新类别 选品库类别")
                }
            });
        }
    },
    components: {
        tableTree,
        HeadTitle,
        compressimgUpload,
        uploadpic
    }
};
</script>
